<template>
  <div class="resCommon">
        <div class="search">
            <div class="classify">
                <el-radio-group v-model="activeName" @change="toggle">
                    <el-radio-button label="public">公共</el-radio-button>
                    <el-radio-button label="tenant">私有</el-radio-button>
                    <el-radio-button label="share">共享</el-radio-button>
                </el-radio-group>
            </div>
            <div class="searchBox">
                <search placeholder="请输入搜索内容" :live-search="true" :search-word.sync="searchName" @search="searchCon"/>
            </div>
        </div>
        <!-- 目录面包屑 -->
        <el-breadcrumb v-if="breadcrumbList.length>1" class="breadcrumb-wrap" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item 
                v-for="(item, index) in breadcrumbList"
                :key="item.id"
                @click.native="onClickBread(item, index)">
                <span class="cursor">{{item.name}}</span>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <div v-else class="breadVisbility"></div>
        <!-- 表格 -->
        <div>
            <el-table v-loading="loading" :data="resourcePublic" stripe style="width: 100%">
                <el-table-column :label="HIVEtableHead[clickStep-1].first">
                    <template slot-scope="scope">
                        <el-button v-if="clickStep==1" @click="menuDetail(scope.row)" type="text">{{scope.row.databaseName}}</el-button>
                        <el-button v-if="clickStep==2" @click="menuDetail(scope.row)" type="text">{{scope.row.tableName}}</el-button>
                        <span v-if="clickStep==3">{{scope.row.columnName}}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="clickStep=='1'" label="修改日期">
                    <template slot-scope="scope">
                        <span>{{scope.row.updDate}}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="clickStep=='2'" prop="name" label="列数">
                    <template slot-scope="scope">
                        <span>{{scope.row.columnNum}}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="clickStep!=1" label="包含权限">
                    <template slot-scope="scope">
                        <span>{{scope.row.powerList}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>      
        <!-- 分页(默认 10条/页) -->
        <pagenation :pageInfo='pageinfo'></pagenation>
    </div>
</template>

<script>
import DialogCom from '@/components/resource/TenantResource'
import Pagenation from '@/components/resource/Pagenation'
import resource from '@/mixins/resource'
import Search from '@/components/common/Search'
export default {
  components:{DialogCom, Pagenation, Search},
  mixins:[resource],
  data() {
    return {
      pageinfo: {
          tenantNum: 0,
          currentPage: 1
      },
      resourcePublic: [],
    };
  },
  mounted(){
        this.breadcrumbList = [
            {
                name: '返回',
                id: '0'
            }
        ],
      // 获取列表
      this.getResourceList();
  },
  methods: {
    toggle(){
        this.isPowerDisabled = true;
        let tab = this.activeName;
        this.breadcrumbList =  [
            {
                name: '返回',
                id: '0'
            }
        ]
        this.clickStep = 1;
        this.pageIndex=1
        this.pageinfo.currentPage=1
        this.currentPage = 1;
        this.getResourceList();
    },
  }
};
</script>

<style lang="scss" scoped>
@import "../../styles/resCommon.scss";
.searchTit {
  display: flex;
  justify-content: flex-end;
}
.powerOption {
  color: #409eff;
  font-size: 14px;
  padding: 0px 8px;
  background: #d0e7ff;
  border: 1px solid #409eff;
  border-radius: 4px;
  margin-right: 8px;
}
.menu {
  overflow-x: auto;
}
</style>